<style lang="less">
@theme-color: #409EFF;
@max-width: 100%;
@color6: #585858;
@import "@/assets/style/variables.less";

.layout {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    font-size: 16px;
    transition: all 0.3s ease;
    color: @color6;

    .welcome {
        text-align: center;
        padding: 200px 20px;

        h2 {
            margin-bottom: 15px;
            color: #333;
        }

        p {
            color: @color6;
            margin-bottom: 10px;
        }
    }
}

.layout-header {
    width: 100%;
    height: 60px;
    background-color: #fff;
    padding: 0px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eae9e9;
    box-shadow: 0 5px 10px rgba(0, 0, 0, .05);

    .logo {
        margin-top: 5px;
        padding-left: 10px;


        .img {

            img {
                width: 100px;
            }
        }
    }

    .right {
        .top {
            i {
                font-size: 18px;
                margin-right: 10px;
            }

            .icon {
                transition: all 0.3s ease;

                &:hover {
                    color: @theme-color;
                }
            }

            span {
                margin-right: 10px;
                font-size: 15px;


            }

            .edit {
                cursor: pointer;

                &:hover {
                    color: @theme-color;
                }
            }

            .button {
                text-align: center;
                padding: 8px 10px 5px 20px !important;
            }
        }

        .bottom {
            margin-top: 10px;
            font-size: 14px;
            color: #ccc;
        }
    }
}

.layout-section {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;

    .aside {
        width: 200px;
        height: 100%;
        // padding-top: 10px;
        padding-bottom: 50px;
        border-right: 1px solid #eae9e9;
        overflow: scroll;

        &.small {
            overflow: visible;
            width: 50px;
        }


        &::-webkit-scrollbar {
            display: none;
        }

        >div {
            background-color: #fff;

            position: relative;

            a {
                width: 100%;
                display: block;
                cursor: pointer;
                padding: 15px 30px;
                padding-right: 20px;
                transition: all .3s ease-in-out;

                background-color: #fff;
                color: @color6;
                position: relative;

                .list {
                    position: absolute;
                    left: 100%;
                    top: 0;
                    display: none;
                    z-index: 1000;
                    padding: 0 6px;
                    min-width: 150px;

                    ul {
                        background-color: #fff;
                        box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
                        width: 180px !important;
                        overflow: hidden;
                        border-radius: 5px;

                        li {
                            width: 100%;
                            text-align: center;

                            a {
                                line-height: 40px;
                                padding: 0;
                                width: 100%;

                            }
                        }
                    }

                }

                &:hover .list {
                    display: block;
                }


                &.small {
                    padding: 15px;
                }


                &:hover {
                    background-color: rgba(142, 212, 255, 0.4);
                    color: @theme-color;
                }

                &.active {
                    color: @theme-color;
                    // background-color: #409EFF;
                }
            }

            .opt {
                display: flex;
                align-items: center;
                justify-content: space-between;

                .icon {
                    font-size: 13px;
                    transition: all 0.3s ease-in-out;

                    &.active {
                        transform: rotate(180deg);
                    }
                }
            }


            ul {
                margin: 0 !important;

                li {

                    height: 40px;

                    a {
                        padding: 10px 59px;
                        width: 100%;
                        height: 100%;
                        font-size: 16px;
                        display: block;

                    }
                }
            }
        }
    }



    .main {

        width: calc(100% - 200px);
        height: 100%;
        background-color: #f0f0f0;
        overflow: scroll;

        &.small {
            width: calc(100% - 50px);
        }

        &::-webkit-scrollbar {
            display: none;
        }
    }

    .main-nav {
        height: 36px;
        background-color: #fff;
        padding: 5px 10px;

        a {
            display: inline-block;
            padding: 3px 24px 3px 10px;
            height: 26px;
            position: relative;
            background-color: #fff;
            margin-right: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
            color: @color6;
            text-align: center;

            span {
                font-size: 12px;
            }

            i {
                width: 15px;
                height: 15px;
                line-height: 16px;
                position: absolute;
                right: 5px;
                top: 6px;
                transition: all 0.5s ease;

                &:hover {
                    background-color: #ccc;
                    border-radius: 50%;
                }
            }

            &.active {
                color: @theme-color;
            }
        }
    }

    .main-content {
        width: 100%;
        height: calc(100% - 36px);
        padding: 10px;
    }
}

.aside {


    [class^="el-icon"] {
        vertical-align: middle;
        margin-right: 10px;
        font-size: 20px;
    }

    span {
        vertical-align: middle;
    }

    >div {
        background-color: #F0F0F0;
    }
}

// 修改为更完整的过渡配置
.cate-enter,
.cate-leave-to {
    max-height: 0;
    opacity: 0;
}

.cate-enter-active,
.cate-leave-active {
    transition: all .9s ease-in-out;
    overflow: hidden;
}

.cate-enter-to,
.cate-leave {
    max-height: 300px;
    /* 确保这个高度与实际内容高度一致 */
    opacity: 1;
}

.article-enter,
.article-leave-to {
    height: 0;
    opacity: 0;
}

.article-enter-active,
.article-leave-active {
    transition: all 0.4s ease-in-out;
    overflow: hidden;
}

.article-enter-to,
.article-leave {
    height: 80px;
    /* 确保这个高度与实际内容高度一致 */
    opacity: 1;
}

.comment-enter,
.comment-leave-to {
    height: 0;
    opacity: 0;
}

.comment-enter-active,
.comment-leave-active {
    transition: all 0.5s ease-in-out;
    overflow: hidden;
}

.comment-enter-to,
.comment-leave {
    height: 160px;
    /* 确保这个高度与实际内容高度一致 */
    opacity: 1;
}
</style>

<template>
    <div class="layout"
        v-bind:style="`max-width:${$store.state.maxWidth};font-size:${$store.state.fontSize};font-family:${$store.state.fontFamily};`">

        <header class="layout-header">
            <div class="logo">
                <div class="img">
                    <img src="./assets/img/logo.png" alt="">
                </div>
            </div>
            <div class="right">
                <div class="top">
                    <i @click="asideFn" class="el-icon-s-fold icon"></i>
                    <i class="el-icon-user"></i>
                    <span>{{ username }}</span>
                    <span class="edit" @click="dialogVisible = true">修改密码</span>
                    <el-button class="button" type="danger" plain size="mini" @click="logoutFn">退出</el-button>
                </div>
            </div>
        </header>
        <div>
            <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
                <el-input type="password" v-model="oldpassword" placeholder="请输入旧密码"></el-input>
                <el-input type="password" style="margin-top: 10px;" v-model="newpassword1"
                    placeholder="请输入新密码"></el-input>
                <el-input type="password" style="margin-top: 10px;" v-model="newpassword2"
                    placeholder="再次输入密码"></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save">确 定</el-button>
                </span>
            </el-dialog>
        </div>

        <section class="layout-section">
            <aside :class="{ small: aside }" class="aside">
                <!-- 左侧菜单 -->
                <div>
                    <router-link :class="{ small: aside }" active-class="active" to="/home">
                        <i class="el-icon-s-home"></i>
                        <span v-if="aside == false">主页</span>
                    </router-link>
                </div>
                <div>
                    <router-link :class="{ small: aside }" active-class="active" to="/banner">
                        <i class="el-icon-s-ticket"></i>
                        <span v-if="aside == false">轮播图</span>
                    </router-link>
                </div>

                <div>
                    <router-link :class="{ small: aside }" active-class="active" to="/note">
                        <i class="el-icon-s-promotion"></i>
                        <span v-if="aside == false">随笔管理</span>
                    </router-link>
                </div>
                <div>
                    <router-link :class="{ small: aside }" active-class="active" to="/photo">
                        <i class="el-icon-picture"></i>
                        <span v-if="aside == false">相册管理</span>
                    </router-link>
                </div>
                <div>
                    <router-link :class="{ small: aside }" active-class="active" to="/MyRouter">
                        <i class="el-icon-s-finance"></i>
                        <span v-if="aside == false">导航设置</span>
                    </router-link>
                </div>
                <div>
                    <a :class="{ small: aside }" class="opt" @click="isShowCate = !isShowCate" href="javascript:;">
                        <div>
                            <i class="el-icon-menu"></i>
                            <span v-if="aside == false">导航管理</span>
                        </div>
                        <i v-if="!aside" :class="['icon el-icon-arrow-down', { 'active': isShowCate }]"></i>
                        <div class="list">
                            <ul style="margin-top: 10px;">
                                <li v-for="(item, index) in listCateArr" :key="index" class="opt">
                                    <router-link :class="{ active: isActive(item) }" :to="`/cateList?cate=${item}`"
                                        exact>{{
                                            item }}</router-link>
                                </li>
                            </ul>
                        </div>
                    </a>
                    <transition v-if="aside == false" name="cate">
                        <ul style="margin-top: 10px;" v-if="isShowCate">
                            <li v-for="(item, index) in listCateArr" :key="index" class="opt">
                                <router-link :class="{ active: isActive(item) }" :to="`/cateList?cate=${item}`" exact>{{
                                    item }}</router-link>
                            </li>
                        </ul>
                    </transition>

                </div>
                <div>
                    <a :class="{ small: aside }" class="opt" href="javascript:;" @click="isShowArtice = !isShowArtice">
                        <div>
                            <i class="el-icon-s-management"></i>
                            <span v-if="aside == false">文章管理</span>
                        </div>
                        <i v-if="aside == false" :class="['icon el-icon-arrow-down', { 'active': isShowArtice }]"></i>
                        <div class="list">
                            <ul style="margin-top: 10px;">
                                <li><router-link active-class="active" to="/publish_article">发布文章</router-link></li>
                                <li><router-link active-class="active" to="/article_list">文章列表</router-link></li>
                            </ul>
                        </div>
                    </a>

                    <transition v-if="aside == false" name="article">
                        <ul style="margin-top: 10px;" v-if="isShowArtice">
                            <li><router-link active-class="active" to="/publish_article">发布文章</router-link></li>
                            <li><router-link active-class="active" to="/article_list">文章列表</router-link></li>
                        </ul>
                    </transition>
                </div>
                <div>
                    <a :class="{ small: aside }" class="opt" href="javascript:;"
                        @click="isShowComment = !isShowComment">
                        <div>
                            <i class="el-icon-s-comment"></i>
                            <span v-if="aside == false">评论管理</span>
                        </div>
                        <i v-if="aside == false" :class="['icon el-icon-arrow-down', { 'active': isShowComment }]"></i>
                        <div class="list">
                            <ul style="margin-top: 10px;">
                                <li>
                                    <router-link active-class="active" to="/comment?type=随笔评论" exact>随笔评论</router-link>
                                </li>
                                <li>
                                    <router-link active-class="active" to="/comment?type=文章评论" exact>文章评论</router-link>
                                </li>
                                <li>
                                    <router-link active-class="active" to="/comment?type=祝福评论" exact>祝福评论</router-link>
                                </li>
                                <li>
                                    <router-link active-class="active" to="/comment?type=弹幕留言" exact>弹幕留言</router-link>
                                </li>
                            </ul>
                        </div>
                    </a>
                    <transition v-if="aside == false" name="comment">
                        <ul style="margin-top: 10px;" v-if="isShowComment">
                            <li>
                                <router-link active-class="active" to="/comment?type=随笔评论" exact>随笔评论</router-link>
                            </li>
                            <li>
                                <router-link active-class="active" to="/comment?type=文章评论" exact>文章评论</router-link>
                            </li>
                            <li>
                                <router-link active-class="active" to="/comment?type=祝福评论" exact>祝福评论</router-link>
                            </li>
                            <li>
                                <router-link active-class="active" to="/comment?type=弹幕留言" exact>弹幕留言</router-link>
                            </li>
                        </ul>
                    </transition>
                </div>
                <div>
                    <router-link :class="{ small: aside }" active-class="active" to="/user">
                        <div>
                            <i class="el-icon-s-custom"></i>
                            <span v-if="aside == false">用户管理</span>
                        </div>
                    </router-link>
                </div>
                <div>
                    <router-link :class="{ small: aside }" active-class="active" to="/setting">
                        <div>
                            <i class="el-icon-s-tools"></i>
                            <span v-if="aside == false">系统界面设置</span>
                        </div>
                    </router-link>
                </div>
            </aside>

            <main :class="{ small: aside }" class="main">
                <!-- 右侧内容 -->
                <nav class="main-nav">
                    <router-link active-class="active" v-for="item in navList" :key="item.id" :to="{ path: item.path }"
                        exact>
                        <span>{{ item.text }}</span>
                        <i @click="closeTabFn(item.text)" style="font-style: normal;font-size: 16px;">×</i>
                    </router-link>
                </nav>

                <div class="main-content">

                    <!-- 二级路由出口 -->
                    <router-view />

                </div>
            </main>
        </section>

    </div>
</template>

<script>
import { mapState } from "vuex"
import { listCate, changePassword } from "@/api/index"
import { Message, MessageBox } from "element-ui";
export default {
    data() {
        return {
            // 管理导航显示隐藏
            isShowCate: false,
            // 文章显示隐藏
            isShowArtice: false,
            // 评论显示隐藏
            isShowComment: false,
            username: "",
            // 文章导航列表
            listCateArr: [],
            dialogVisible: false,

            oldpassword: "",
            newpassword1: '',
            newpassword2: '',
            aside: false,
        }
    },
    computed: {
        // 把state对象下的数据映射到组件中
        ...mapState(["navList", 'userData']),
    },
    methods: {
        asideFn() {
            this.aside = !this.aside
        },
        async changePasswordFn() {
            let token = localStorage.getItem('AUTO_TOKEN')
            // console.log(token)
            if (this.newpassword1 == this.newpassword2) {
                await changePassword({ oldPassword: this.oldpassword, newPassword: this.newpassword1, token: token })
                    .then(
                        res => {
                            if (res.code == 200) {
                                Message({
                                    type: "success",
                                    message: res.msg,
                                    showClose: true,
                                    offset: 100
                                })
                                localStorage.removeItem('AUTO_TOKEN')
                                this.dialogVisible = false
                                setTimeout(() => {
                                    Message({
                                        // type: "success",
                                        message: '请重新登录',
                                        showClose: true,
                                        offset: 100
                                    })
                                    this.$router.push('/login')
                                }, 1000)
                            } else {
                                Message({
                                    type: "error",
                                    message: res.msg,
                                    showClose: true,
                                    offset: 100
                                })
                            }
                        }, err => {
                            console.log(err)
                            Message({
                                type: "error",
                                message: '修改密码失败',
                                showClose: true,
                                offset: 100
                            })
                        }
                    )
            } else {
                Message({
                    type: "error",
                    message: '密码不一致',
                    showClose: true,
                    offset: 100
                })
            }

        },

        async save() {

            await this.changePasswordFn()
        },
        handleClose() {
            this.dialogVisible = false
        },
        isActive(item) {
            // 检查当前路由是否包含该分类
            return this.$route.query.cate === item ||
                (this.$route.query.cate === undefined && item === '默认分类');
        },
        // 获取文章分类标题
        async listCateFn() {
            await listCate().then(
                res => {
                    // console.log(res)
                    if (res.code == 200) {
                        // 方法一 数组去重
                        // let arr = res.result.filter((item, index) => {
                        //     return res.result.findIndex(i => {
                        //         return i.cate == item.cate
                        //     }) == index
                        // })
                        // console.log(arr)
                        // 方法二
                        this.listCateArr = [...new Set(res.result.map(
                            item => item.cate
                        ))]
                        // console.log(this.listCateArr)
                    }
                }, err => {
                    console.log(err)
                }
            )
        },
        // 点击退出登录
        logoutFn() {
            MessageBox.confirm('确定退出登录吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(() => {
                Message({
                    showClose: true,
                    offset: 100,
                    type: 'success',
                    message: '退出成功'
                });
                localStorage.removeItem('AUTO_TOKEN')
                localStorage.removeItem('vuex')
                this.$router.replace({ path: "/login" }).catch(() => { })
            }).catch(() => {
                Message({
                    showClose: true,
                    offset: 100,
                    type: 'info',
                    message: '取消退出'
                });
            });
        },

        // 关闭当前标签窗口
        closeTabFn(text) {
            // console.log(text)
            let arr = this.navList.filter(item => item.text != text)
            // console.log("--->", arr)
            if (arr.length < 1 && this.$route.path == '/home') {
                return false;
            }
            this.$store.commit("closeTab", arr);

            if (arr.length < 1) {
                // 如果关闭后没有标签页了，跳转到首页
                setTimeout(() => {
                    this.$router.push({ path: "/home" }).catch(() => { })
                }, 0)
                return false;
            }
            let len = arr.length;
            if (len >= 1) {
                let path = arr[len - 1].path;
                if (path == '/cateList') {
                    path = '/cateList?cate=' + arr[len - 1].text
                }
                if (path == '/comment') {
                    path = '/comment?type=' + arr[len - 1].text;
                }
                // console.log('path', path)
                setTimeout(() => {
                    this.$router.push({ path: path }).catch(() => { })
                }, 0)
            }

        }
    },
    created() {
        // console.log('111', this.userData)
        this.listCateFn()
        let username = this.userData.username;
        if (username) {
            this.username = username;
        }
    }
}


</script>